<template>
    <div>
        <el-select v-model="parasmValue" filterable
                   :clearable="clearStatus"
                   :loading="loading"
                   :disabled="disabled"
                   @change="selectChange">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                remote
                :value="item.id"
                placeholder="请输入">
            </el-option>
<!--            <div style="bottom: 0;width: 100%;background: #fff">
                <el-pagination
                    small
                    :current-page="tableList.current"
                    :page-sizes="tableList.sizes"
                    :page-size="tableList.size"
                    layout="prev, pager,next,total"
                    :total="tableList.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>

            </div>-->
        </el-select>
    </div>
</template>

<script>
import {fetchPaper, fetchRule} from "@/api/exam";

export default {
    name: "SelectPage",
    props: {
        size: {
            type: String,
            default: "small"
        },
        disabled:{
            type:Boolean,
            default:false
        },
        columnId:{
            type: String,
            default: ""
        },
        categoryId:{
            type: Number,
            default: null
        },
        childId:{
            type: String,
            default: ""
        },
        settingTitle:{
            type: String,
            default: "试卷"
        },
        paperOption:{
            type:Array,
            default:()=>[]
        },
        clearStatus:{
            type:Boolean,
            default: true
        }
    },
    data() {
        return {
            loading: false,
            tableList: {
                current: 1,
                total: 0,
                size: 1000,
                sizes: [1500,2000,2500,3000]
            },
            options: [],
            parasmValue: ""
        }
    },
    watch: {
        //监听值的变化
        parasmValue(vl) {
            this.tableList.current = 1
        },
        paperOption(vl){
            this.options = vl;
        }

    },
    mounted() {
    },
    created() {
        this.parasmValue = this.childId;
        this.options = this.paperOption;
    },
    methods: {
        selectChange(vl) {
            this.$emit("update:childId", vl);
            this.$emit("repeat-change", vl);
        },
        handleSizeChange(val) {
            this.tableList.size = val;
            this.search(4)
        },
        handleCurrentChange(val) {
            this.tableList.current = val;
            this.search(5)
        },
        search(v) {
            this.loading = true;
            let params = {
                current: this.tableList.current,
                size: this.tableList.size,
                pageSize: this.tableList.size,
                pageCurrent: this.tableList.current,
                currentPage: this.tableList.current,
            }
            if(this.settingTitle === "试卷"){
                params.categoryId = this.categoryId
                fetchPaper(params).then(res =>{
                    this.loading = false;
                    this.options = res.records;
                    this.tableList.total = res.total
                    this.tableList.current = res.current
                    this.tableList.size = res.size
                })
            }
            if(this.settingTitle === "规则"){
                if(this.categoryId !== null){
                    params.categoryId = this.categoryId
                    fetchRule(params).then(res =>{
                        this.loading = false;
                        this.options = res.records;
                        this.tableList.total = res.total
                        this.tableList.current = res.current
                        this.tableList.size = res.size
                    })
                }
            }
        },
    }
}
</script>

<style scoped>

</style>
